<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>异清轩博客栏目页面</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/nprogress.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
<link rel="shortcut icon" href="images/icon/favicon.ico">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/nprogress.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<!--[if gte IE 9]>
  <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="js/html5shiv.min.js" type="text/javascript"></script>
  <script src="js/respond.min.js" type="text/javascript"></script>
  <script src="js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
  <script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="/login/login.js"></script>
  <script src="/js/blog.js"></script>
</head>

<body class="user-select">
<div id="app">
  <blog-header ref="bh" v-on:category-change="query"></blog-header>
  <section class="container">
  <div class="content-wrap">
    <div class="content">
      <div class="title">
        <h3>{{showCategory( { categoryId:cid } )}}</h3>
      </div>
      <article v-for="a in page.records" class="excerpt excerpt-1"><a class="focus" href="article.html" title="">
        <img class="thumb" data-original="images/excerpt.jpg"
             :src="a.titleImgs || 'images/excerpt.jpg'" alt=""></a>
        <header><a class="cat" href="program">{{showCategory(a)}}<i></i></a>
          <h2><a :href="'article.html?aid='+a.id" title="">{{a.title}}</a></h2>
        </header>
        <p class="meta">
          <time class="time"><i class="glyphicon glyphicon-time"></i> {{a.createTime}}</time>
          <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共{{a.readCnt}}人围观</span> <a class="comment" href="article.html#comment"><i class="glyphicon glyphicon-comment"></i> 0个不明物体</a></p>
        <p class="note">{{ getDesc(a) }}</p>
      </article>

      <nav class="pagination" style="display: none;">
        <ul>
          <li class="prev-page"></li>
          <li class="active"><span>1</span></li>
          <li><a href="?page=2">2</a></li>
          <li class="next-page"><a href="?page=2">下一页</a></li>
          <li><span>共 2 页</span></li>
        </ul>
      </nav>
    </div>
  </div>
  <aside class="sidebar">
    <div class="fixed">
      <div class="widget widget_search">
        <form class="navbar-form" action="/Search" method="post">
          <div class="input-group">
            <input type="text" name="keyword" class="form-control" size="35" placeholder="请输入关键字" maxlength="15" autocomplete="off">
            <span class="input-group-btn">
            <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
            </span> </div>
        </form>
      </div>
      <div class="widget widget_sentence">
        <h3>每日一句</h3>
        <div class="widget-sentence-content">
          <h4>2016年01月05日星期二</h4>
          <p>Do not let what you cannot do interfere with what you can do.<br />
            别让你不能做的事妨碍到你能做的事。（John Wooden）</p>
        </div>
      </div>
    </div>
    <div class="widget widget_hot">
      <h3>热门文章</h3>
      <ul>
        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></span><span class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
      </ul>
    </div>
  </aside>
</section>
  <blog-footer></blog-footer>
</div>
<script>
  var v = new Vue({
    el:"#app",
    data : {
      page : {},
      cid : ""
    },
    created(){
      this.cid = location.href.replace(/.+cid=(\d+)/,"$1");
      this.query(this.cid);
    },
    methods:{
      query(cid){
        // 修改当前页面的 cid
        this.cid = cid;
        axios.get("/c112s3plyblog/article/queryByCid?cid="+cid).then(res=>{
          this.page = res.data
        })
      },
      // 根据 文章的分类id 显示对应的分类名 , a==> 文章对象
      showCategory(a){
        // 根据文章的id, 查找分类对象
        if(this.$refs.bh && this.$refs.bh.categories){
          var category = this.$refs.bh.categories.find(c => c.id == a.categoryId);
          return category ? category.name : '';
        }else{
          return "";
        }
      },
      // 从文章中提取内容介绍
      getDesc(a){
        if(a.description){
          // 如果内容介绍字段有值, 直接返回
          return a.description;
        } else {
          // 如果内容介绍字段没有值, 那么从文章内中截取前 100 个字符
          let content = a.content.replace(/(<.+?>|\s+)/g,"");
          if(content.length>100){
            content = content.substring(0,97) + "...";
          }
          return content;
        }
      }
    }
  })
</script>
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.ias.js"></script> 
<script src="js/scripts.js"></script>
</body>
</html>